<template>
  <div class="k-date-picker">
    <el-date-picker
      v-model="timeValue"
      :type="type"
      align="right"
      unlink-panels
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      v-bind="$attrs"
      @change="update"
    />
  </div>
</template>
<script>
export default {
  name: 'KDatePicker',
  inheritAttrs: false,
  props: {
    value: {
    },
    // 默认年月日格式
    valueFormat:{
        type: String,
        default: 'yyyy-MM-dd'
    },
    type:{
      type: String,
      default: 'daterange'
    }
  },
  data() {
    return {
      timeValue: this.value,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            end.setTime(end.getTime())
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  watch: {
    value(newVal) {
      this.timeValue = newVal
      this.$emit('hqchang')
    }
  },
  methods: {
    update() {
      this.$emit('input', this.timeValue)
    }
  }
}
</script>
<style lang="scss">
$backgroundColor:#F8F7FB;
$mainColor:#3b425d;// 主色调

.k-date-picker{
  display: inline-block;
  height:48px;
  line-height: 48px;
  .el-range-editor {
    height:48px;
    background-color: $backgroundColor;
  }
}
.el-range-editor .el-range-input {
    background-color: #F8F7FB;
    line-height: 1;
}
.el-date-editor .el-range-separator {
    line-height: 48px;
}
.el-range-editor.el-input__inner {
  align-items: center;
  padding: 0px 10px;
  width: 250px;
  border: 0px;
}
.el-range-editor.is-active, .el-range-editor.is-active:hover {
  border-color: $backgroundColor;
}
.el-date-table td.end-date span, .el-date-table td.start-date span {
  background-color: $mainColor;
}
.el-date-table td.available:hover {
  color: #3b425d;
}

</style>
